<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const dataType = ref('resting');
const chartRef = ref(null);
const avgRate = ref(72);
const maxRate = ref(125);
const minRate = ref(58);

const initChart = () => {
  const chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '时间: {b0}<br/>心率: {c0}bpm'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Array(24).fill().map((_, i) => `${i}:00`)
    },
    yAxis: {
      type: 'value',
      name: '心率(bpm)',
      min: 50,
      max: 130
    },
    series: [{
      data: [65, 58, 60, 62, 65, 68, 72, 75, 78, 82, 85, 88, 90, 92, 95, 98, 102, 105, 110, 115, 120, 110, 95, 80],
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 2,
        color: '#F56C6C'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(245, 108, 108, 0.5)' },
          { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
        ])
      }
    }]
  };

  chart.setOption(option);
  window.addEventListener('resize', chart.resize);
};

const fetchData = () => {
  console.log('获取心率数据，类型:', dataType.value);
};

onMounted(() => {
  initChart();
  fetchData();
});
</script>

<template>
  <div class="heart-rate-container">
    <div class="header">
      <h3>心率监测</h3>
      <el-select v-model="dataType" size="small" @change="fetchData">
        <el-option label="静息心率" value="resting" />
        <el-option label="运动心率" value="exercise" />
        <el-option label="全天心率" value="fullDay" />
      </el-select>
    </div>

    <div ref="chartRef" class="chart" />

    <div class="stats">
      <el-statistic title="平均心率" :value="avgRate" suffix="bpm" />
      <el-statistic title="最高心率" :value="maxRate" suffix="bpm" />
      <el-statistic title="最低心率" :value="minRate" suffix="bpm" />
    </div>
  </div>
</template>

<style scoped>
.heart-rate-container {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 350px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}
</style>